<template>
    <div>
        <panle title='私域直播' content="私域直播列表"></panle>
        <div class="searchbar">
            <el-row class="pt20">
                <el-col :span="12">
                    <el-button size="mini" @click="init()">刷新</el-button>
                    <pers-button icon="el-icon-edit" size="mini" @click="add()" perms="live:list:add" type="primary"
                        label="添加"></pers-button>
                    <!-- <button @click="clickMe()">点我啊</button> -->
                    <!-- <pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="sys:role:del" label="批量删除"></pers-button> -->
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">

                        <el-form-item label="">
                            <el-input v-model="formInline.keyword" size="mini" placeholder="请直播间标题"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" size="mini" @click="serach">查询</el-button>
                            <el-button @click="resetForm('formInline')" size="mini">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" height="800" row-key="id" border stripe
            default-expand-all v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="id" width="80" label="直播ID"></el-table-column>
            <el-table-column prop="z_id" width="80" label="复用ID"></el-table-column>


            <el-table-column prop="live_type" label="类型">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.live_type == 1" size="mini" effect="dark" type="danger">直播</el-tag>
                    <el-tag v-if="scope.row.live_type == 0" size="mini" effect="dark" type="success">复播</el-tag>
                    <el-tag v-if="scope.row.live_type == 1 && scope.row.record_status == ''" size="mini" effect="dark" type="success">未录制</el-tag>
                    <el-tag v-if="scope.row.live_type == 1 && scope.row.record_status == 'record_start_succeeded'" size="mini" effect="dark" type="success">录制启动成功</el-tag>
                    <el-tag v-if="scope.row.live_type == 1 && scope.row.record_status == 'record_start_failed'" size="mini" effect="dark" type="success">录制启动失败</el-tag>
                    <el-tag v-if="scope.row.live_type == 1 && scope.row.record_status == 'record_paused'" size="mini" effect="dark" type="success">录制暂停</el-tag>
                    <el-tag v-if="scope.row.live_type == 1 && scope.row.record_status == 'record_resumed'" size="mini" effect="dark" type="success">录制续录成功</el-tag>
                    <el-tag v-if="scope.row.live_type == 1 && scope.row.record_status == 'record_error'" size="mini" effect="dark" type="success">录制异常</el-tag>
                    <el-tag v-if="scope.row.live_type == 1 && scope.row.record_status == 'record_ended'" size="mini" effect="dark" type="success">录制结束</el-tag>
                    
                </template>
            </el-table-column>

            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 0" size="mini" effect="dark" type="success">未开始</el-tag>
                    <el-tag v-if="scope.row.status == 1" size="mini" effect="dark" type="danger">直播中</el-tag>
                    <el-tag v-if="scope.row.status == 2" size="mini" effect="dark" type="info">
                        已结束
                        <span v-if="scope.row.playUrl">
                            <br/>
                            <el-link type="primary" style="font-size: 10px;" class="copyBtn" :data-clipboard-text="scope.row.playUrl">
                                    复制回放地址
                            </el-link>
                        </span>
                    </el-tag>
                </template>
            </el-table-column>


            <el-table-column prop="title" label="直播标题"></el-table-column>


            <el-table-column prop="stream_push_url" width="200" label="推流地址" v-if="isShow(['live:list:copy_oss_address', 'live:list:copy_oss_secret'])">
                <template slot-scope="scope">
                    <pers-button v-if="scope.row.live_type == 1" class="copyBtn"
                        :data-clipboard-text="scope.row.stream_push_url" type="primary" perms="live:list:copy_oss_address" size="mini" label="OBS地址">OBS地址</pers-button>

                    <pers-button v-if="scope.row.live_type == 1" class="copyBtn"
                        :data-clipboard-text="scope.row.stream_push_url_key" type="primary" perms="live:list:copy_oss_secret" size="mini" label="OBS秘钥">OBS秘钥</pers-button>

                    <el-tag v-if="scope.row.live_type == 0" size="mini" effect="dark" type="info">复播无推流地址</el-tag>

                </template>
            </el-table-column>

            <el-table-column prop="shareUrl" label="看播地址" v-if="hasPermission('live:list:copy_address')">
                <template slot-scope="scope">
                    <pers-button class="copyBtn" :data-clipboard-text="scope.row.shareUrl" type="primary" perms="live:list:copy_address"
                        size="mini" label="复制地址"></pers-button>

                </template>
            </el-table-column>
            <el-table-column label="数据大屏" v-if="hasPermission('live:list:screen:data')">
                <template slot-scope="scope">
                    <pers-button type="primary" size="mini" label="" icon="fa fa-bar-chart-o"
                        perms="live:list:screen:data" @click="linkScreenData(scope.row)"></pers-button>
                </template>
            </el-table-column>
            <el-table-column label="控场大屏" v-if="hasPermission('live:list:screen:control')">
                <template slot-scope="scope">
                    <pers-button type="warning" size="mini" label="" icon="fa fa-desktop"
                        perms="live:list:screen:control" @click="linkScreenControl(scope.row)"></pers-button>
                </template>
            </el-table-column>
            <el-table-column label="互动列表" v-if="hasPermission('live:list:screen:infolist')">
                <template slot-scope="scope">
                    <pers-button type="primary" size="mini" label="" icon="fa fa-list"
                                 perms="live:list:screen:infolist" @click="linkScreenList(scope.row)"></pers-button>
                </template>
            </el-table-column>
            <el-table-column label="用户行为记录" v-if="hasPermission('live:list:action')">
                <template slot-scope="scope">
                    <pers-button type="primary" size="mini" label="" icon="fa fa-hospital-o" perms="live:list:action"
                        @click="linkActionData(scope.row)"></pers-button>
                </template>
            </el-table-column>
            <el-table-column label="邀约计划" v-if="hasPermission('live:list:invitation')">
                <template slot-scope="scope">
                    <pers-button type="primary" size="mini" label="" icon="fa fa-paper-plane"
                        perms="live:list:invitation" @click="invitationplan(scope.row)"></pers-button>
                </template>
            </el-table-column>
            <el-table-column label="邀约到课" v-if="hasPermission('live:list:attendance')">
                <template slot-scope="scope">
                    <pers-button type="primary" size="mini" label="" icon="fa el-icon-s-operation"
                        perms="live:list:attendance" @click="attendanceplan(scope.row)"></pers-button>
                </template>
            </el-table-column>
            <el-table-column label="订单邀约统计" v-if="hasPermission('live:list:orderinvitation')">
                <template slot-scope="scope">
                    <pers-button type="primary" size="mini" label="" icon="fa el-icon-s-operation"
                        perms="live:list:orderinvitation" @click="orderinvitation(scope.row)"></pers-button>
                </template>
            </el-table-column>
            <el-table-column label="错误记录" v-if="hasPermission('live:list:tcplayer:log')">
                <template slot-scope="scope">
                    <pers-button type="primary" size="mini" label="" icon="fa fa-file"
                                 perms="live:list:tcplayer:log" @click="tcPlayerLog(scope.row)"></pers-button>
                </template>
            </el-table-column>
            <el-table-column label="直播时间" width="210">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">开始时间:{{ scope.row.start_time }}</el-tag>
                        <p></p>
                        <el-tag size="medium">结束时间:{{ scope.row.end_time }}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="210">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">创建时间:{{ scope.row.create_time }}</el-tag>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="uid" label="操作" fixed="right" width="100"
                v-if="isShow(['live:list:edit', 'live:list:del', 'live:list:multiplexing'])">
                <template slot-scope="scope">
                    <PersButton v-if="scope.row.status == 0" type="text" size="mini" label="编辑" icon="fa  fa-pencil"
                        perms="live:list:edit" @click="edit(scope.row)"></PersButton>
                    <PersButton v-if="scope.row.status == 0" type="text" size="mini" icon="el-icon-delete"
                        perms="live:list:del" label="删除" @click="del(scope.row)"></PersButton>
                    <PersButton type="text" v-if="scope.row.status == 2" size="mini" icon="el-icon-circle-plus-outline"
                        perms="live:list:multiplexing" label="复用" @click="copy(scope.row)"></PersButton>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog v-dialogDrag :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false"
            :title="!form.id ? '新增直播' : '修改直播'">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                <el-row :gutter="20">

                    <el-col :span="24">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="直播讲师" prop="teacher_id">
                                    <el-select v-model="form.teacher_id" placeholder="请选择课程" size="small"
                                        style="width:100%">
                                        <el-option v-for="item in teacher_dict" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="直播标题" prop="title">
                                    <el-input v-model="form.title" placeholder="请输入直播标题" size="small" />
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="直播封面" prop="conver" ref="conver">
                            <div class="uploadcol">
                                <div class="uploadborder">
                                    <img v-if="form.conver" :src="form.conver" width="100%" height="100%" />
                                    <img v-else src="@/assets/img/uploadimg.jpg" width="100%" height="100%" />
                                </div>
                                <el-button type="primary" @click="openUploadDial()" size="mini"
                                    style="margin-top:10px">上传封面</el-button>
                            </div>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="直播背景" prop="bg_url" ref="bg_url">
                            <div class="uploadcol">
                                <div class="uploadborder">
                                    <img v-if="form.bg_url" :src="form.bg_url" width="100%" height="100%" />
                                    <img v-else src="@/assets/img/uploadimg.jpg" width="100%" height="100%" />

                                </div>
                                <el-button type="primary" @click="openUploadDialBg()" size="mini"
                                    style="margin-top:10px">上传背景</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="直播类型" prop="live_type">
                                    <el-radio-group v-model="form.live_type" size="small" :disabled="Boolean(form.id)">
                                        <el-radio-button label="0">复播</el-radio-button>
                                        <el-radio-button label="1">直播</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="form.live_type==1">
                                <el-form-item label="是否录制" prop="is_record">
                                    <el-select v-model="form.is_record" placeholder="请选择" size="small" style="width:100%">
                                        <el-option  label="是" :value="1"></el-option>
                                        <el-option  label="否" :value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="评论延迟" prop="delay">
                                    <el-input-number v-model="form.delay" controls-position="right" size="small"
                                        :step="1"></el-input-number>

                                </el-form-item>
                            </el-col>


                        </el-row>
                    </el-col>
                    <el-col v-if="form.live_type == 0" :span="24">
                        <el-row>

                            <el-form-item label="直播文件" prop="push_file_name">
                                <el-col :span="20">
                                    <el-input v-model="form.push_file_name" placeholder="请选择直播推流文件地址" size="small" />
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="primary" @click="openUploadDialvideo()" size="small"
                                        style="margin-left:10px">选择视频</el-button>
                                </el-col>
                            </el-form-item>
                        </el-row>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="售卖课程" prop="course_sale_id">
                            <el-select v-model="form.course_sale_id" multiple placeholder="请选择课程" size="small"
                                style="width:100%">
                                <el-option v-for="item in course_dict" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="评论组" prop="pinglunzu_id">
                            <el-select v-model="form.pinglunzu_id" multiple placeholder="请选择评论组" size="small"
                                style="width:100%">
                                <el-option v-for="item in pinglunzu_dict" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="严禁词组" prop="yanjincizu_id">
                            <el-select v-model="form.yanjincizu_id" multiple placeholder="请选择严禁词组" size="small"
                                style="width:100%">
                                <el-option v-for="item in yanjincizu_dict" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="直播公告" prop="announcement">
                            <el-input type="textarea" v-model="form.announcement" maxlength="200" rows="3"
                                placeholder="请输入公告" size="small"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="开始时间" prop="start_time">
                            <el-date-picker v-model="form.start_time" size="small" type="datetime"
                                format="yyyy-MM-dd HH:mm:ss" style="width:unset" value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="请选择直播开始时间"></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="结束时间" prop="end_time">
                            <el-date-picker v-model="form.end_time" size="small" format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss" style="width:unset" type="datetime"
                                placeholder="请选择直播开始时间"></el-date-picker>
                        </el-form-item>
                    </el-col>




                    <el-col :span="12">
                        <el-form-item label="直播场次" prop="venue">
                            <el-select v-model="form.venue" placeholder="请选择直播场次" size="small" style="width:100%">
                                <el-option v-for="item in venue_dict" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="直播类型" prop="player_type">
                            <el-select v-model="form.player_type" placeholder="请选择直播场次" size="small" style="width:100%">
                                <el-option  label="快直播" :value="0"></el-option>
                                <el-option  label="标准直播" :value="1"></el-option>
                                <el-option  label="慢直播" :value="2"></el-option>
                                <el-option  label="自适应直播" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.venue==2">
                        <el-form-item label="直播分组" prop="live_group">
                            <el-select v-model="form.live_group" placeholder="请选择直播分组" size="small" style="width:100%">
                                <el-option v-for="item in live_group_list" :key="item.id" :label="item.title"
                                    :value="item.live_group">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务器组" prop="ServerAt">
                            <el-select v-model="form.ServerAt" placeholder="请选择服务器组" size="small" style="width:100%">
                                <el-option v-for="item in ServerAtlist" :key="item.type" :label="item.name"
                                    :value="item.type">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否禁言" prop="is_start_comments">
                            <el-select v-model="form.is_start_comments" placeholder="请选择" size="small" style="width:100%">
                                <el-option  label="是" :value="1"></el-option>
                                <el-option  label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false" size="small">取 消</el-button>
                <el-button type="primary" @click="!form.id ? submitForm('form') : subEditForm('form')" size="small">确
                    定</el-button>
            </div>

        </el-dialog>
        <el-dialog v-dialogDrag :visible.sync="copy_open" width="600px" append-to-body :close-on-click-modal="false"
            :title="'复用直播'" perms="live:list:add_copy">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                <el-row>

                    <el-col :span="24">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="直播讲师" prop="teacher_id">
                                    <el-select v-model="form.teacher_id" disabled="disabled" placeholder="请选择课程"
                                        size="small" style="width:100%">
                                        <el-option v-for="item in teacher_dict" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="直播标题" prop="title">
                                    <el-input v-model="form.title" placeholder="请输入直播标题" size="small" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>


                    <el-col :span="12">
                        <el-form-item label="直播封面" prop="conver">
                            <div class="uploadcol">
                                <div class="uploadborder">
                                    <img v-if="form.conver" :src="form.conver" width="100%" height="100%" />
                                    <img v-else src="@/assets/img/uploadimg.jpg" width="100%" height="100%" />
                                </div>
                                <!--<el-button type="primary" @click="openUploadDial()" size="mini"-->
                                <!--style="margin-top:10px">上传头像</el-button>-->
                            </div>
                        </el-form-item>
                    </el-col>


                    <el-col :span="12">
                        <el-form-item label="直播背景" prop="bg_url">
                            <div class="uploadcol">
                                <div class="uploadborder">
                                    <img v-if="form.bg_url" :src="form.bg_url" width="100%" height="100%" />
                                    <img v-else src="@/assets/img/uploadimg.jpg" width="100%" height="100%" />

                                </div>
                                <!--<el-button type="primary" @click="openUploadDialBg()" size="mini"-->
                                <!--style="margin-top:10px">上传头像</el-button>-->
                            </div>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="操作延迟" prop="delay">
                            <el-input-number v-model="form.delay" :min="0" size="small"
                                label="请输入操作延迟时间,单位秒"></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="直播人数" prop="init_people_num">
                            <el-input-number v-model="form.init_people_num" :min="0" size="small"
                                label="请输入直播间初始人数"></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="热卖显示" prop="course_is_hot">
                            <el-radio-group v-model="form.course_is_hot">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="库存显示" prop="course_is_show_stock">
                            <el-radio-group v-model="form.course_is_show_stock">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="直播文件" prop="push_file_name">
                            <el-row style="display: inline;">
                                <el-col :span="24">
                                    <el-input v-model="form.push_file_name" readonly="readonly"
                                        placeholder="请选择直播推流文件地址" size="small"/>
                                </el-col>
                                <el-col :span="0">
                                    <!--<el-button type="primary" @click="openUploadDialvideo()" size="small"-->
                                    <!--style="margin-left:10px">选择视频</el-button>-->
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>


                    <el-col :span="24">
                        <el-form-item label="售卖课程" prop="course_sale_id">
                            <el-select disabled v-model="form.course_sale_id" multiple placeholder="请选择课程" size="small"
                                style="width:100%;">
                                <el-option v-for="item in course_dict" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="评论组" prop="pinglunzu_id">
                            <el-select v-model="form.pinglunzu_id" multiple placeholder="请选择评论组" size="small"
                                style="width:100%">
                                <el-option v-for="item in pinglunzu_dict" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="严禁词组" prop="yanjincizu_id">
                            <el-select v-model="form.yanjincizu_id" multiple placeholder="请选择严禁词组" size="small"
                                style="width:100%">
                                <el-option v-for="item in yanjincizu_dict" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="直播公告" prop="announcement">
                            <el-input type="textarea" v-model="form.announcement" maxlength="200" rows="3"
                                placeholder="请输入公告" size="small"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="开始时间" prop="start_time">
                            <el-date-picker v-model="form.start_time" size="small" type="datetime"
                                format="yyyy-MM-dd HH:mm:ss" style="width:unset" value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="请选择直播开始时间"></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="结束时间" prop="end_time">
                            <el-date-picker v-model="form.end_time" size="small" format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss" style="width:unset" type="datetime"
                                placeholder="请选择直播开始时间"></el-date-picker>
                        </el-form-item>
                    </el-col>


                    <el-col :span="12">
                        <el-form-item label="直播场次" prop="venue">
                            <el-select v-model="form.venue" placeholder="请选择直播场次" size="small" style="width:100%">
                                <el-option v-for="item in venue_dict" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="直播类型" prop="player_type">
                            <el-select v-model="form.player_type" placeholder="请选择直播场次" size="small" style="width:100%">
                                <el-option  label="快直播" :value="0"></el-option>
                                <el-option  label="标准直播" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                        <el-form-item label="直播分組" prop="live_group">
                            <el-input  v-model="form.live_group" minlength="9" maxlength="30" 
                                placeholder="请输入如: 2407-0304日-下午01" size="small"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="24" v-if="form.venue==2">
                        <el-form-item label="直播分组" prop="live_group">
                            <el-select v-model="form.live_group" placeholder="请选择直播分组" size="small" style="width:100%">
                                <el-option v-for="item in live_group_list" :key="item.id" :label="item.title"
                                    :value="item.live_group">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务器组" prop="ServerAt">
                            <el-select v-model="form.ServerAt" placeholder="请选择服务器组" size="small" style="width:100%">
                                <el-option v-for="item in ServerAtlist" :key="item.type" :label="item.name"
                                    :value="item.live_group">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否禁言" prop="is_start_comments">
                            <el-select v-model="form.is_start_comments" placeholder="请选择" size="small" style="width:100%">
                                <el-option  label="是" :value="1"></el-option>
                                <el-option  label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="copy_open = false" size="small">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')" size="small" :loading="submitLoading">确
                    定</el-button>
            </div>

        </el-dialog>

        <select-img :show="IsShowPicDig" @update="cleanDiaglog" :selectType="imgnum" @selectSure="selectImgs"
            :type="0"></select-img>
        <select-img :show="isShowBgPicDiag" @update="cleanBgDiaglog" :selectType="bgPicDiagNUm"
            @selectSure="selectBgImgs" :type="0"></select-img>
        <select-img :show="isShowVideoPicDiag" @update="cleanVideoDiaglog" :selectType="videoDiagNum"
            @selectSure="selectVideo" :type="2"></select-img>

    </div>
</template>

<script>

let _self;
import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {
    getLiveList,
    addLive,
    updateLive,
    delLive
} from '@/api/live/manager'
import SelectImg from '@/components/select-img';

import cc from '@/common/debounce.js'

import Clipboard from 'clipboard';

import {
    loadDict
} from '@/api/tools/dict'
import {
    selectRole
} from '@/api/system/role';
import ClipboardJS from 'clipboard';
import debounce from '@/common/debounce.js';
import { hasPermission,isShow } from '@/common/permission';
export default {
    components: {
        Panle,
        PersButton,
        SelectImg
    },
    data() {

        return {
            loading: false,
            submitLoading: false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数
            tableData: [],
            serachword: '',
            formInline: {},
            course_dict: {},
            pinglunzu_dict: [],
            yanjincizu_dict: [],
            live_group_list:[],
            ServerAtlist:[],
            open: false,
            copy_open: false,
            form: {
                bg_url: "",
                conver: "",
                // course_is_hot: 1,
                // course_is_show_stock: 0,
                // course_sale_id: 1,
                // pinglunzu_id: 1,
                delay: 0,
                end_time: "2024-05-09 19:46:52",
                id: null,
                start_time: "2024-05-09 16:46:48",
                teacher_id: 1,
                title: "测试直播",
                course_sale_id: null,
                pinglunzu_id: [],
                yanjincizu_id: [],
                course_is_hot: 0,
                course_is_show_stock: 0,
                push_file_name: "",
                init_people_num: 0,
                announcement: "",
                live_type: 0,
                player_type: 0,
                ServerAt:'ALL',
                venue: '',
                live_group:'',
                is_start_comments:1,
                is_record:2
            },
            venue_dict: [
                {
                    id: '1',
                    name: '第一场'
                },
                {
                    id: '2',
                    name: '第二场'
                },

            ],
            rules: {
                ServerAt: [{
                    required: true,
                    message: "服务器不能为空",
                    trigger: "change"
                }],
                bg_url: [{
                    required: true,
                    message: "直播背景不能为空",
                    trigger: "change"
                }],
                conver: [{
                    required: true,
                    message: "直播封面不能为空",
                    trigger: "change"
                }],
                title: [{
                    required: true,
                    message: "直播标题不能为空",
                    trigger: "blur"
                }, {
                    min:1,
                    max:50,
                    message: '直播标题长度在1到50个字符之间',
                    trigger: 'blur'
                }],
                // course_sale_id: [{
                //     required: true,
                //     message: "请选择绑定课程",
                //     trigger: "blur"
                // }],
                // pinglunzu_id: [{
                //     required: true,
                //     message: "请选择评论组",
                //     trigger: "blur"
                // }],
                // yanjincizu_id: [{
                //     required: true,
                //     message: "请选择严禁词组",
                //     trigger: "blur"
                // }],
                start_time: [{
                    required: true,
                    message: "请选择直播开始日期",
                    trigger: "change"
                }],
                end_time: [{
                    required: true,
                    message: "请选择直播结束日期",
                    trigger: "change"
                }],
                teacher_id: [{
                    required: true,
                    message: "请选择直播关联的教师",
                    trigger: "change"
                }],
                course_sale_id: [{
                    required: true,
                    message: "请选择售卖课程",
                    trigger: "change"
                }],
                push_file_name: [{
                    required: true,
                    message: "请选择直播推流文件",
                    trigger: "change"
                }],
                init_people_num: [
                    {
                        required: true,
                        message: "请输入直播间初始化人数",
                        trigger: "change"
                    }
                ],
                venue: [
                    {
                        required: true,
                        message: "请选择场次",
                        trigger: "change"
                    }
                ],
                live_group: [
                    {
                        required: true,
                        message: "请输入直播分组",
                        trigger: "change"
                    }
                ],
                pinglunzu_id: [
                {
                        required: true,
                        message: "请选择评论组",
                        trigger: "change"
                    }
                ],
                yanjincizu_id: [
                {
                        required: true,
                        message: "请选择严禁词组",
                        trigger: "change"
                    }
                ],
            },
            teacher_dict: {},
            parentDate: [],
            props: {
                // 配置项（必选）
                value: "id",
                label: "name",
                children: "children"

            },
            checkKey: [],
            multipleSelection: [],
            roleslist: [],
            IsShowPicDig: false,
            imgnum: 1, //选择图片数量,
            isShowBgPicDiag: false,
            isShowVideoPicDiag: false,

            bgPicDiagNUm: 1,
            videoDiagNum: 1,
            clipboardInst: null,
        }
    },
    created() {
        _self = this;
        _self.init();
    },
    methods: {
        hasPermission,
        isShow,
        clickMe() {
            debounce(() => {
                console.log('触发')
            }, 1000)
        },
        init: function () {
            _self.loading = true;
            let param = {
                "pageSize": _self.pageSize,
                "pageNumber": _self.pageNumber,
                "keyword": _self.serachword
            }
            getLiveList(param).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    _self.tableData = res.data.list;
                    _self.total = res.data.total;
                    _self.live_group_list = res.data.live_group_list;
                    _self.ServerAtlist = res.data.ServerAtlist;
                    _self.loading = false;
                }
            })
            // selectRole().then((res) => {
            //     _self.roleslist = res.data;
            // })
            loadDict('teacher').then((res) => {
                _self.teacher_dict = res.data
            })
            loadDict('course').then((res) => {
                _self.course_dict = res.data
            })
            loadDict('pinglunzu').then((res) => {
                _self.pinglunzu_dict = res.data
            })
            loadDict('yanjincizu').then((res) => {
                _self.yanjincizu_dict = res.data
            })

            if (this.clipboardInst != null) {
                this.clipboardInst.destroy();
            }
            var clipboard = new Clipboard('.copyBtn');

            clipboard.on('success', (e) => {
                console.info('Action:', e.action);
                console.info('Text:', e.text);
                console.info('Trigger:', e.trigger);
                this.$message.success('复制成功');
                e.clearSelection();
            });

            clipboard.on('error', (e) => {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });

            this.clipboardInst = clipboard;
        },
        serach: function () {
            _self.serachword = _self.formInline.keyword;
            _self.init();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.formInline.keyword = '';
            this.serachword = '';
            this.init();
        },
        handleSizeChange: function (e) {
            console.log(e);
            _self.pageSize = e;
            _self.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            _self.pageNumber = e;
            _self.init();
        },
        handleSelectionChange: function (e) {
            console.log(e);
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.role_id)

            }
            _self.multipleSelection = selectChang;
            console.log(selectChang);
        },

        add() {

            this.form = {
                bg_url: "",
                conver: "",
                course_is_hot: 0,
                course_is_show_stock: 0,
                course_sale_id: [],
                delay: 0,
                end_time: null,
                id: null,
                start_time: null,
                stream_push_url: null,
                teacher_id: null,
                title: "",
                push_file_name: "",
                init_people_num: 0,
                announcement: '欢迎进入直播间:\n' +
                    '请自行调节手机音量至合适的状态。\n' +
                    '直播界面显示讲师发布的内容，\n' +
                    '听众发言可以在讨论区或以弹幕形式查看。',
                live_type: 0,
                player_type: 0,
                ServerAt:'ALL',
                venue: null,
                live_group: '',
                pinglunzu_id: [],
                yanjincizu_id: [],
                is_start_comments:1,
                is_record:2
            };

            this.open = true;
        },

        submitForm: function (data) {
            this.submitLoading = true;
            debounce(() => {
                _self.$refs[data].validate((valid) => {
                    if (valid) {
                        addLive(_self.form).then((res) => {
                            this.submitLoading = false;
                            console.log(res)
                            if (res.code == 200) {
                                _self.msgSuccess(res.msg);
                                _self.init();
                                _self.open = false;
                                _self.copy_open = false;
                                this.submitLoading = false;

                            } else {
                                _self.msgError(res.msg);

                                this.submitLoading = false;

                            }
                        })
                    } else {
                        this.submitLoading = false;
                        return false;
                    }
                })
            }, 500);

        },
        del: function (data) {


            _self.$confirm('确定删除【' + data.title + '】这个直播间', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                delLive(data.id).then((res) => {
                    if (res.code == 200) {
                        _self.msgSuccess(res.msg);
                        _self.init();
                    } else {
                        _self.msgError(res.msg);
                    }
                })

            }).catch(() => {
                _self.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        edit: function (data) {
            delete data.play_expire_flag
            this.form = { ...data };

            let param = {
                "pageSize": _self.pageSize,
                "pageNumber": _self.pageNumber,
                "keyword": _self.serachword
            }
            getLiveList(param).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                    this.live_group_list = res.data.live_group_list;
                    _self.ServerAtlist = res.data.ServerAtlist;
                    this.loading = false;
                    let is_exists=false;
                    for(let i=0;i<this.live_group_list.length;i++){
                        if(data.id==this.live_group_list[i].id){
                            is_exists=true;
                        }
                    }
                    if(!is_exists){
                        this.live_group_list.push({id:data.id,title:data.title,live_group:data.live_group});
                    }
                }
            })
            this.open = true;
        },
        copy: function (data) {
            this.form = {...data};
            if(data.live_type==1){
                if(!data.record_video_url || data.record_status!='record_ended'){
                    this.$alert('录播未结束,无法复用直播,请稍后再试！', '复用直播提示', {
                        confirmButtonText: '确定'
                    });
                    return false;
                }
                this.form.push_file_name=data.record_video_url;
            }
            this.form.z_id = data.id
            this.copy_open = true;
        },
        subEditForm: function (data) {
            debounce(() => {
                _self.$refs[data].validate((valid) => {
                    if (valid) {
                        updateLive(_self.form).then((res) => {
                            if (res.code == 200) {
                                _self.msgSuccess(res.msg);
                                _self.init();
                                _self.open = false;

                            } else {
                                _self.msgError(res.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                })
            }, 1000);
        },
        cleanDiaglog: function (shows) {
            _self.IsShowPicDig = false;
        },
        cleanBgDiaglog: function (shows) {
            _self.isShowBgPicDiag = false;
        },
        cleanVideoDiaglog: function (shows) {
            _self.isShowVideoPicDiag = false;
        },
        openUploadDial: function () {

            _self.IsShowPicDig = true;
        },
        openUploadDialBg: function () {

            _self.isShowBgPicDiag = true;
        },
        openUploadDialvideo: function () {

            _self.isShowVideoPicDiag = true;
        },
        selectImgs: function (res) {

            console.log(res);
            this.IsShowPicDig = true;
            this.form.conver = res[0].urls
            this.$refs.conver.onFieldChange()
        },
        selectBgImgs: function (res) {

            this.isShowBgPicDiag = true;
            this.form.bg_url = res[0].urls
            this.$refs.bg_url.onFieldChange()

        },
        selectVideo: function (res) {

            this.isShowVideoPicDiag = true;
            this.form.push_file_name = res[0].urls
        },
        linkScreenData: function (data) {
            const routeUrl = this.$router.resolve({
                path: '/live/data',
                query: {
                    liveId: data.id
                },
            });
            window.open(routeUrl.href, '_blank');
        },
        linkScreenControl: function (data) {
            const routeUrl = this.$router.resolve({
                path: '/live/control',
                query: {
                    liveId: data.id
                },
            });
            window.open(routeUrl.href, '_blank');
        },
        linkScreenList: function (data) {
            const routeUrl = this.$router.resolve({
                path: '/live/infolist',
                query: {
                    liveId: data.id
                },
            });
            window.open(routeUrl.href, '_blank');
        },
        linkActionData: function (data) {
            const routeUrl = this.$router.resolve({
                path: '/live/action',
                query: {
                    liveId: data.id,
                    liveTitle: data.title
                },
            });
            window.open(routeUrl.href, '_blank');
        },
        invitationplan(data) {
            console.log(data);
            // this.$router.push({ path: '/live/invitation', query: { liveId: data.id, venue: data.venue } });

            const routeUrl = this.$router.resolve({
                path: '/live/invitation',
                query: { liveId: data.id, venue: data.venue }
            });
            window.open(routeUrl.href, '_blank');
        },
        attendanceplan(data) {
            const routeUrl = this.$router.resolve({
                path: '/live/attendances',
                query: {
                    liveId: data.id
                },
            });
            window.open(routeUrl.href, '_blank');
        },
        orderinvitation(data) {
            
            const routeUrl = this.$router.resolve({
                path: '/live/ordertongji',
                query: {
                    liveId: data.id
                },
            });
            window.open(routeUrl.href, '_blank');
        },
        //错误记录
        tcPlayerLog(data) {
            this.$router.push({ path: '/live/tcplayer', query: { liveId: data.id } });
            // const routeUrl = this.$router.resolve({
            //     path: '/live/tcplayer',
            //     query: { liveId: data.id }
            // });
            // window.open(routeUrl.href, '_blank');
        }
    }
}
</script>

<style lang="scss">
@import "@/assets/css/common.scss";

.demo-form-inline {
    .el-form-item {
        margin-bottom: 0;
    }
}

.el-tree {
    max-height: 200px;
    overflow: auto;
    background: #f7f7f7;
}

.el-tree-node__label,
.el-textarea__inner {
    font-size: 12px;
}

.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
    float: left;
    width: 100px;
}

.el-checkbox__label {
    font-size: 12px !important;
}

.uploadcol {
    display: flex;
    flex-flow: column;
    width: 100px;
}

.uploadborder {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    /* cursor: pointer;

    position: relative;

    overflow: hidden; */
    width: 100px;
    height: 100px;
}
</style>
